<!-- 退货管理--退货单详情 -->
<template>
  <div class="auth-product nissin-box">
    <el-container class="partDetails is-vertical">
      <el-header
        class="custom-info"
        height="auto">
        <read-form
          :record-form="returnGoodsInfoColumns"
          :record-data="headerInfo">
          <template slot="recordInfoslot">
            <div
              class="solt-info">
              <span class="left-span">
                退货产品总数：
                <span class="right-span">{{ headerInfo.orderDetailCount }}</span>
              </span>
              <span>
                品种数：
                <span>{{ headerInfo.returnCount }}</span>
              </span>
              <span>
                金额合计 （元）:
                <span>
                  <span class="price">{{ headerInfo.returnAmount | getFormatterPrice }}</span>
                </span>
              </span>
            </div>
          </template>
        </read-form>
      </el-header>
      <el-editable
        class="distributor-edit-box"
        :data="returnOrderList"
        height="400"
        :key="isRed"
        v-loading="tableLoading"
        :columns="activeTableColumns"
      >
        <template
          slot="default-registrationNumber"
          slot-scope="scope">
          <el-button
            :disabled="!scope.row.registrationNumber||!scope.row.registrationId"
            v-html="regisNoButton(scope.row, 'registration')"
            @click="showPdfRegistion(scope.row.registrationId)"
            type="text"
          />
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <pagination
        ref="page"
        :request-func="getList"
        @returnData="getTableData"
      />
    </el-container>
  </div>
</template>

<script>
import {
  statusArr,
  returnGoodsRedTableColumns,
  returnGoodsNoRedTableColumns,
  returnGoodsInfoColumns,
  orderTypeData
} from './const'
import Pagination from '@components/custom-pagination'
import ReadForm from '@/moduleComponents/beforeSettle/common/read-form'
import {
  hspReturnGoodsOrderInfo, // 医院-退货管理-订单明细详情
  hspReturnGoodsItemDetail // 医院-退货管理-订单明细详情带分页
} from '@const/beforeSettleApi'
import ElEditable from '@components/el-editable'
import { cloneDeep, isObject, hasIn } from 'lodash'
import { formatPrice, regisNoButton, showPdfRegistion } from '@const/agencySaas'
import { getFormatterPrice } from '@const/filter'
export default {
  components: { ElEditable, Pagination, ReadForm },
  data () {
    return {
      id: this.$route.query.id,
      orderStatus: null,
      orderType: null,
      invoiceFlag: null,
      // 表格Loading
      tableLoading: false,
      // 表单 详情展示内容-table
      returnOrderList: [],
      returnGoodsRedTableColumns,
      returnGoodsNoRedTableColumns,
      // 订单详情信息
      headerInfo: {},
      returnGoodsInfoColumns
    }
  },
  mounted () {
    this.getBaseList()
  },
  computed: {
    isRed () {
      // 1.orderStatus:4-已完成 2.orderType:3，4-采购（类型还未定） 3.invoiceFlag: 1-开红票
      const isRed = [4].includes(this.orderStatus) && [3, 4].includes(this.orderType) && [1].includes(this.invoiceFlag)
      return isRed
    },
    activeTableColumns () {
      return this.isRed ? this.returnGoodsRedTableColumns : this.returnGoodsNoRedTableColumns
    }
  },
  filters: {
    getFormatterPrice
  },
  methods: {
    formatPrice,
    regisNoButton,
    showPdfRegistion,
    // 列表请求方法
    getList () {
      this.tableLoading = true
      const body = {
        id: this.id,
        ...this.$refs.page.page
      }
      return this.$axios.$post(hspReturnGoodsItemDetail, body)
    },
    // 列表请求方法
    getTableData (data) {
      this.returnOrderList = data
      this.tableLoading = false
    },
    // 列表请求方法
    async getBaseList () {
      this.tableLoading = true
      const body = {
        id: this.id
      }
      const data = await this.$axios.$post(hspReturnGoodsOrderInfo, body)
      const baseInfo = hasIn(data, 'payload') ? data.payload : {}
      Object.keys(baseInfo).forEach(key => {
        if (key === 'orderStatus') {
          this.orderStatus = baseInfo[key]
          baseInfo[key] = statusArr[baseInfo[key]]
        }
        if (key === 'orderType') {
          this.orderType = baseInfo[key]
          baseInfo[key] = orderTypeData[baseInfo[key]]
        }
        if (key === 'invoiceFlag') {
          this.invoiceFlag = baseInfo[key]
        }
        const type = typeof baseInfo[key]
        const value = ['number'].includes(type) ? baseInfo[key] : (baseInfo[key] || '--')
        this.$set(this.headerInfo, key, value)
      })
    }
  }
}
</script>

<style lang="less">
.nissin-box {
  .partDetails {
    height: 100%;
    .custom-info {
      margin: 0;
    }
  }
  .tip {
    padding: 0 10px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 16px 0;
    & > p {
      font-size: 14px;
      color: #5e6d82;
      line-height: 1.5em;
    }
  }
}
</style>
